import React from 'react';
import { List, InputItem, WhiteSpace, Button, Flex, WingBlank, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import PropTypes from 'prop-types';
import Router from 'umi/router';
import { commonReq } from 'dcloud-core';
import './Login.less';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            value: '',
            autTime: 60
        };
    }

    componentWillUnmount() {
        clearInterval(this.autTime);
    }

    // 登录
    onSubmit() {
        this.props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                const params = Object.assign({}, this.props.form.getFieldsValue());
                this.props.callSubmit(params);
            } else {
                Toast.offline('请正确填写信息..', 1);
            }
        });
    }

    //微信授权
    wxAuth() {
        this.props.callWx();
    }

    getItem() {
        const { getFieldProps, getFieldError } = this.props.form;
        return this.props.loginItem.map((item) => {
            return (
                <InputItem
                    key={item.key}
                    type={item.type}
                    placeholder={item.placeholder}
                    clear
                    {...getFieldProps(item.key, {
                        rules: [
                            item.required ? { required: true, message: item.required } : '',
                            { validator: item.validatorCallBack }
                        ],
                    })}
                    error={!!getFieldError(item.key)}
                    onErrorClick={() => {
                        alert(getFieldError(item.key).join('、'));
                    }}
                    extra={item.extra}
                    defaultValue={item.defaultValue}
                    editable={item.editable}
                    disabled={item.disabled}
                    maxLength={item.maxLength}
                    onBlur={item.onBlurCallBack}
                    onFocus={item.onFocusCallBack}
                >
                    {item.title}
                </InputItem>
            )
        }
        )
    }

    // 暂不支持onChange
    /*    testChange(item, index , value) {
            this.setState({
                value: value
            })
            item.onChangeCallBack(index, value);
        }*/

    // 登录按钮
    loginItem() {
        const { getFieldProps, getFieldError } = this.props.form;
        return (
            <div>
                <List>
                    <List.Item >
                        {this.getItem()}
                        <InputItem
                            placeholder="请输入短信验证码"
                            {...getFieldProps('phoneCode', {
                                rules: [
                                    { required: true, message: '短信验证码不能为空' },
                                    {
                                        validator: (rule, value, callback) => {
                                            commonReq.smsCode(value, '').then((_value) => {
                                                callback();
                                            }).catch((e) => {
                                                callback(e);
                                            });
                                        }
                                    }
                                ],
                            })}
                            extra={<Button
                                disabled={this.state.autTime === 60 ? false : true}
                                type={'ghost'} size={'small'} onClick={() => {
                                    this.props.form.validateFields({ force: true }, (error) => {
                                        if (!error.mobile && !error.code) {
                                            this.autTime = setInterval(() => {
                                                if (this.state.autTime === 60) {
                                                    this.props.getCode(this.props.form);
                                                }
                                                if (this.state.autTime !== 0) {
                                                    this.setState({
                                                        autTime: this.state.autTime - 1
                                                    })
                                                } else {
                                                    clearInterval(this.autTime);
                                                    this.setState({
                                                        autTime: 60
                                                    })
                                                }
                                            }, 1000);
                                        } else {
                                            Toast.offline('请正确填写信息..', 1);
                                        }
                                    });
                                }}>
                                {this.state.autTime === 60 ? '获取短信验证码' : this.state.autTime}
                            </Button>}></InputItem></List.Item> </List>
                <List.Item>
                    <Button type="primary" activeStyle={{ opacity: .8, backgroundColor: '#e7572f' }} style={{ fontSize: '14px', height: '44px', lineHeight: '44px' }} onClick={this.onSubmit.bind(this)}>{this.props.itemType === 'login' ? '登录' : '注册'}</Button>
                </List.Item>
            </div>
        )
    }

    // 注册, 忘记密码
    register() {
        if (this.props.itemType === 'login') {
            return (
                <WingBlank>
                    <WhiteSpace size="xl" />
                    <Flex justify="around">
                        <Flex.Item onClick={() => { Router.push('./regist') }}><span>注册</span></Flex.Item>
                        <Flex.Item onClick={() => { Router.push('./regist') }} style={{ textAlign: 'right' }}><span>忘记密码</span></Flex.Item>
                    </Flex>
                </WingBlank>
            )
        } else {
            return null
        }

    }

    render() {
        return (
            <div>
                {this.loginItem()}
                {/* {this.register()} */}
            </div>
        );
    }
}

const LoginleWrapper = createForm()(Login);

Login.propTypes = {
    // 表单项目
    loginItem: PropTypes.arrayOf(PropTypes.shape({
        // 项目名
        title: PropTypes.string,
        // input类型
        type: PropTypes.oneOf(['text', 'password', 'phone', 'number', 'digit', 'money', 'bankCard']).isRequired,
        // 项目key值
        key: PropTypes.string.isRequired,
        // 默认提示语
        placeholder: PropTypes.string,
        // 不能为空时提示语
        required: PropTypes.string,
        // 正则回调函数
        validatorCallBack: PropTypes.func,
        // 输入框右侧提示
        extra: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.node,
        ]),
        // 默认值
        defaultValue: PropTypes.string,
        // 是否可编辑
        editable: PropTypes.bool,
        // 是否禁用
        disabled: PropTypes.bool,
        // 最大长度
        maxLength: PropTypes.number,
        // 失去焦点
        onBlur: PropTypes.func,
        // 获取焦点
        onFocus: PropTypes.func,
    })),
    // 微信提交回调函数
    callWx: PropTypes.func,
    // 账号密码登录提交回调函数
    callSubmit: PropTypes.func.isRequired,
    // 是否有微信授权登录
    isWx: PropTypes.bool,
    // 组件类型
    itemType: PropTypes.oneOf(['login', 'regist']).isRequired,

}


export default LoginleWrapper;